<style lang="scss" scoped>

@import '../../style/mixin.scss';
.sel-taste {
    line-height: 0.8rem;
    padding: 0.2rem 0;
    .taste_button {
        @include sc(0.5rem, #c00);
    }
}

.checkbox {
    @include wh(1rem, 1rem);
}

.alet_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, .1);
}

.tip_text_container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45%;
    margin-left: -45%;
    width: 90%;
    animation: tipMove .4s;
    background-color: rgba(255, 255, 255, 1);
    border: 1px;
    padding-top: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px;
    border-radius: 0.25rem;
    .confrim {
        @include sc(.8rem, #fff);
        font-weight: bold;
        margin-top: .8rem;
        background-color: #4cd964;
        width: 100%;
        text-align: center;
        line-height: 1.8rem;
        border: 1px;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
}

.quick_remark {
    background-color: #fff;
    margin-top: .4rem;
    padding: 0 .6rem;
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            margin-right: .6rem;
            margin-bottom: .6rem;
            span {
                @include sc(.5rem, #333);
                padding: .3rem .6rem;
                border: 0.025rem solid #3190e8;
                border-left: 0;
            }
            .first {
                border-left: 0.025rem solid #3190e8;
                border-top-left-radius: .2rem;
                border-bottom-left-radius: .2rem;
            }
            .last {
                border-top-right-radius: .2rem;
                border-bottom-right-radius: .2rem;
            }
            .choosed {
                color: #fff;
                background-color: #3190e8;
            }
        }
    }
}

.taste-box {
    line-height: 0.5rem;
}

.tasteItem {
    @include sc(.5rem, #333);
}

</style>

<template lang="html">

    <section class="sel-taste">
        <span class="taste_button" v-if="num>0" @click="selTaste">选择口味：</span><span class="tasteItem" v-if="computedTasteList&&list.choosed==true" v-for="(list,index) in computedTasteList">{{list.name}}、</span>
        <div class="alet_container" v-show="showTaste">
            <section class="tip_text_container">
                <div class="quick_remark">
                    <ul class="remark_arr_list_ul">
                        <li class="remark_arr_list_li" v-for="(item,index) in tasteList" :key="index">
                            <span class="remark_item_li first last " :class="{choosed:item.choosed}" @touchstart="confirmTaste(item,foods.id,$event)">{{item.name}}</span>
                        </li>
                    </ul>
                    <br>
                </div>
                <div class="confrim" @click="showTaste=false">关闭</div>
            </section>
        </div>
    </section>

</template>

<script>

import {
    mapState, mapMutations
}
from 'vuex'
export default {
    props: ['foods', 'shopId'],
    data() {
        return {
            num: 0,
            showTaste: false,
            tasteList: []
        }
    },
    mounted() {
      this.getFoodTasteList()
    },
    computed: {
        ...mapState([
                'cartList'
            ]),
            /**
             * 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
             */
            shopCart: function() {
                return Object.assign({}, this.cartList[this.shopId]);
            },
            //shopCart变化的时候重新计算当前商品的数量
            computedTasteList: function() {

                let food_id = this.foods.id;
                if (this.shopCart && this.shopCart[food_id] && this.shopCart[food_id][food_id]) {
                    this.num = parseInt(this.shopCart[food_id][food_id]['num'])
                    console.log(this.num)
                }else{
                  this.num = 0
                }



                if (this.shopCart && this.shopCart[food_id] && this.shopCart[food_id][food_id] && this.shopCart[food_id][food_id]['tasteList']) {
                    let computedTasteList = this.shopCart[food_id][food_id]['tasteList']
                    if (computedTasteList) {
                        this.tasteList = computedTasteList
                    }
                    console.log(computedTasteList)

                    return computedTasteList
                } else {
                    return []
                }
            },
    },
    methods: {
        ...mapMutations([
                'CONFIRM_TASTEADD'
            ]),
            selTaste() {
                this.showTaste = !this.showTaste
            },
            confirmTaste(item, foods_id, event) {
                event.preventDefault();
                if (item.choosed == false) {
                    item.choosed = true
                } else if (item.choosed == true) {
                    item.choosed = false
                }
                let tasteDatas = this.tasteList
                this.CONFIRM_TASTEADD({
                    shopid: this.shopId,
                    foods_id,
                    tasteDatas
                })
            },
            removeByValue(arr, val) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == val) {
                        arr.splice(i, 1);
                        break;
                    }
                }
            },
            getFoodTasteList(){
              this.$http.get(this.HttpUrl.UrlConfig.getFoodTasteList)
                  .then(res => {
                      res = res.data
                      res.foodTasteList.forEach((val)=>{
                         val.choosed = false
                      })
                      this.tasteList = res.foodTasteList
                  }).catch(error => {
                      console.log(error)
                  })
            }
    }
}

</script>
